<template>
    <div class="storeInfo">
        <div class="head">
            <el-form :model="form" class="headForm">
                
                <el-form-item label="" style="width:150px;margin-right:5px">
                <div class="block">
                    <el-date-picker
                    v-model="form.date"
                    type="date"
                    placeholder="时间区间">
                    </el-date-picker>
                </div>
                </el-form-item>

               <el-form-item label="" style="width:105px">
                <el-select v-model="form.period_id" placeholder="档位">
                    <el-option label="档位" value=""></el-option>
                    <el-option v-for="(item,a) in periodlist" :key="a" :label="item.name" :value="item.period_id"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:105px">
                <el-input v-model="form.title" placeholder="调价名称"></el-input>
                </el-form-item>
                


                
 
                
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="danger" v-if="limitList_str.indexOf('batchDel') != -1" @click="bichDel">批量删除</el-button>
                <el-button type="danger" v-if="limitList_str.indexOf('add') != -1" @click="editShow = true;">添加</el-button>


            </el-form>
            
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" 
            @selection-change="handleSelectionChange"
            tooltip-effect="dark"
            >

                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column prop="date_cn" label="日期" fixed>
                    <template   slot-scope="scope"> 
                        <p>{{scope.row.date_cn}}<br>{{scope.row.expire_cn}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="period_name" label="档位"></el-table-column>
                <el-table-column prop="title" label="调价名称" width="200"></el-table-column>
                <el-table-column prop="weekday_cn" label="执行周次"></el-table-column>
                <el-table-column prop="rise_rules" label="调价范围">
                    <template   slot-scope="scope">
                        <div v-if="scope.row.rise_rules.length !=0">
                         <p v-for="(rules,r) in scope.row.rise_rules" :key="r">{{rules.category_name}}  {{rules.rise_percent}}</p>   
                        </div>
                        <div v-else></div>
                    </template>
                </el-table-column>

                <el-table-column prop="combo_length" label="套餐房时">
                    <template   slot-scope="scope"> 
                        <p v-if="scope.row.combo_length <= 0">房时不变</p>
                        <p v-else>{{scope.row.combo_length}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间" width="200"> </el-table-column>
                <el-table-column prop="" label="操作" width="200">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                        
                    
                </el-table-column>
                

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
  

        <!-- 添加 -->
        <el-dialog title="添加" :visible.sync="editShow">
            <el-form :model="editForm">
                <el-form-item label="调价名称"  :label-width="editW">
                    <el-input v-model="editForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="选择日期" :label-width="editW">
                    <div class="block">
                        <el-date-picker
                        v-model="editForm.date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="时间区间">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="档位调价" :label-width="editW">
                    <el-checkbox-group v-model="editForm.period_id">
                        <el-checkbox v-for="(item,a) in periodlist" :key="a" :label="item.period_id">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="调价范围" :label-width="editW">  
                    <!-- rise_rules -->
                    <div v-for="(item,i) in editForm.rise_rules" :key="i" class="rangeprice">
                        <el-select clearable v-model="item.rcate" placeholder="调价类别">
                            <el-option v-for="item in catelist" :key="item.category_id" :label="item.cate_name"
                             :value="item.need"></el-option>
                        </el-select>
                        <el-input v-model="item.rise_percent"  oninput="value=value.replace(/[^(-?\d+)(.\d+)?$]/g,'')"  autocomplete="off" class="perrange"></el-input>
                        <span>%</span>
                        <el-button style="margin-left:40px" type="primary" @click="radd(i,'add')">+</el-button>
                        <el-button style="margin-left:10px" type="info" @click="radd(i,'addno')">-</el-button>    
                    </div>                 
                    
                </el-form-item>

                <el-form-item label="执行周次" :label-width="editW">
                    
                    <el-select v-model="editForm.weekday" placeholder="周一">
                        <el-option v-for="(item,a) in weekendlength" :key="a" :label="item.name" :value="item.val"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="套餐房时变化" :label-width="editW">
                    <el-select v-model="editForm.combo_length" placeholder="保持不变">
                        <el-option v-for="(item,a) in combolength" :key="a" :label="item.name" :value="item.val"></el-option>
                    </el-select>
                </el-form-item>
                
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editShow = false">取 消</el-button>
                <el-button type="primary" @click="addHoliday">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 预览 -->
        <el-dialog title="收货地址" :visible.sync="seeview" class="iframbox">
            <iframe class="iframe_see"  :src="iframsrc"></iframe>
        </el-dialog>
    </div>
</template>



//
// <style lang="scss">
// .rangeprice{
//     display: flex;
//     margin-bottom: 5px;
//     .el-input__inner{width: 120px;} 
//     .perrange{
//         width:90px;
//         .el-input__inner{
//             width:80px;margin-left:5px
//         }
        
//     }    
// }
// .iframbox{
//     height: 800px;
//     .iframe_see{
//         width: 100%;
//         height: 500px;
//     }
// }

// </style>



<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
//import func from '../../../../../vue-temp/vue-editor-bridge';
//* ./vue-temp/vue-editor-bridge in-------vscode 自行在这里加入了一行代码致使报错
// var url= potUrl.rpriceList;
var searchG_url = potUrl.itemSnshelve
let store_id = abc.getSession('store_id')
console.log('sssss',store_id)
export default {
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            range:[
                
            ],
            form:{
                size:20,
                page:1
            },//搜索内容的参数
            ticketF:{
                day:0,
                week:0
            },
            editShow:false,//编辑弹框的显示开关
            addShow:false,//添加弹框的显示开关
            seeview:false,//预览的谈跨过显示开关
            pageNum:1,//page
            limitList:[],//权限的存储数组
            iframsrc:'http://h5.pre.meiktv.com/store/preview?store_id=1&longitude=0&latitude=0&date=1583643600',
            defunltImg:'this.src="'+require('../../img/error.png')+'"',//图片链接有误时显示的图片
            caLists:[],//           
            searchgoodsInput:{
                url:searchG_url,
            },
            editW:'120px',
            multipleSelection:[],//放选中的商品
            editForm:{
                title:'',//调价名称
                date:'',//调价日期
                period_id:[],//档位
                weekday:'1',//执行周次
                combo_length:'',//套餐房时变化
                rise_rules:[
                    {                    
                        rcate:'',
                        rise_percent:'',                    
                    }
                ]//调价范围
            },//编辑弹框内需要的数据
            periodlist:[],
            // timev:'',
            limitList_str:'',
            batchdelData:[],
            combolength:[],
            weekendlength:[
                {name:'周一',val:'1'},
                {name:'周二',val:'2'},
                {name:'周三',val:'3'},
                {name:'周四',val:'4'},
                {name:'周五',val:'5'},
                {name:'周六',val:'6'},
                {name:'周日',val:'0'}
            ],
            catelist:[],
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.riselist,that.form,function(res){
            that.total = parseInt(res.data.total)
            that.tableData =  res.data;
        });//列表 
        abc.get(that,potUrl.periodIndex,{},function(caList) {
            console.log('bb',caList)
            that.periodlist = caList.data
        }) //获取档位 
        for(var i=0;i<17;i++){
            let com = {};
            if(i == 0){
                com.name = '保持不变';
            }else{
                com.name = `全部${i}小时`
            }
            com.val = i+'.00';
            that.combolength.push(com)
        }   //造数据，套餐房时变化
        console.log('comss',that.combolength)
        abc.get(that,potUrl.categoryList,{},function(res){
            let cate_arr = res.data;
            //调价类别的type=3;房时调价、特色套餐、超值套擦type:2;其他为1
            cate_arr.unshift({cate_name:'房时调价',category_id:'0'})
            //cate_arr.unshift({cate_name:'调价类别',category_id:'0'})
            $.each(cate_arr,function(i,item){
                if(item.cate_name == '房时调价' || item.cate_name == '特色套餐' || item.cate_name == '超值套餐'){
                    item.type = 2
                }else if(item.cate_name == '调价类别' ){
                    item.type = '3'
                }else{
                    item.type = '1'
                }
                item.need = item.category_id+'-'+item.type+'-'+item.cate_name;
            })
            that.catelist = cate_arr

        })
    },
    created(){
        var that = this;
        setTimeout(() => {
            var str = $('.router-link-active').attr('href');
            abc.limit(that,str)// 权限 
            var listr = []; 
            $.each(limitList,function(i,item){
                listr.push(item.url) 
                if(item.url != 'add' && item.url != 'batchDel'){
                    that.limitList.push(item)
                }
            })
            that.limitList_str = listr.join('-')// 权限   
        }, 500)            
    },
    methods:{           
        search(){
            var that = this;
            abc.get(that,potUrl.riselist,that.form,function(res){
                that.total = parseInt(res.data.length)
                that.tableData =  res.data;
            });//列表 
        }, 
        add(){
            
        },  
        bichDel(){
            //点击批量删除和其确定按钮；
            //that,url,txt,pars,cb
            var that = this;
            var obj = {};
            obj.period_id = that.batchdelData[0];
            obj.date = that.batchdelData[1];
            abc.twoTips(that,potUrl.risedel,'确认批量删除这些数据？',obj,function(){
                abc.get(that,potUrl.riselist,{},function(res){
                    that.total = parseInt(res.data.total)
                    that.tableData =  res.data;
                });//列表 
            })
        },
        editYes(){
            let that = this;
            abc.post(that,potUrl.risedone,that.editForm,function(res){
                
            })
        },
        theClick(a,b){
            let that = this;
            console.log('sss',a)
            if(a == 'edit'){  
                            
                abc.get(that,potUrl.riselist,{period_id:b.period_id,date:b.date},function(res){
                    let rule = res.data[0].rise_rules;
                    $.each(rule,function(i,item){
                        item.rcate = item.category_id+'-'+item.type+'-'+item.category_name
                    })
                    res.data[0].rise_rules = rule;
                    res.data[0].period_id = res.data[0].period_id.split(',')
                    that.editForm = res.data[0];
                    console.log('editformss',that.editForm)
                    console.log(that.editForm)
                    that.editShow =true; 
                })
            }else if(a == 'del'){
                let obj = {};
                
                obj.period_id = b.period_id
                obj.date = b.date
                abc.twoTips(that,potUrl.risedel,'是否要删除此条数据？',obj,function() {
                    that.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    abc.get(that,potUrl.riselist,that.form,function(res){
                        that.total = parseInt(res.data.total)
                        that.tableData =  res.data;
                    });//列表 
                })
            }else if(a == 'preview'){
                //预览@click="dialogTableVisible = true"
                var timestr = b.date+' '+'13:00:00'
                var datec = new Date(timestr).getTime()/1000;
                that.iframsrc = 'http://h5.pre.meiktv.com/store/preview?store_id='+ store_id +'&longitude=0&latitude=0&date='+datec
                that.seeview = true;
            }
            
        },
        changePage(val){
            //翻页
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,potUrl.itemList,that.form);
        },
        handleSelectionChange(val) {
            //全选---批量删除的操作中选择的删除项
            this.multipleSelection = val;
            //batchdelData
            this.batchdelData = []
            var period_idarr=[],datearr=[];
            $.each(val,function(i,item){
                period_idarr.push(item.period_id);
                datearr.push(item.date);
            })
            this.batchdelData.push(period_idarr)
            this.batchdelData.push(datearr)
            console.log('val',this.batchdelData)
        },
        radd(a,b){
            //调价范围中添加的操作
            let that = this;
            console.log(a,b)
            if(b == 'add'){
                if(that.editForm.rise_rules.length >= that.catelist.length){
                    that.$message('您需要添加的条数已经到达上限了。')
                }else{
                    that.editForm.rise_rules.push({                    
                        rcate:'',
                        rise_percent:'',                    
                    })    
                }
                
            }else{
                if(that.editForm.rise_rules.length == 1){
                    this.$message('这是最后一条了，不能在减少了。');
                }else{
                    that.editForm.rise_rules.splice(a,1)
                }
            }
        },
        addHoliday(){
            //添加时的确定按钮操作；
            let that = this;
            let rules_arr=[];
            that.editForm.period_id = that.editForm.period_id.join(',')
            that.editForm.combo_length == '' ? that.editForm.combo_length = 0 : that.editForm.combo_length
            $.each(that.editForm.rise_rules,function(i,item){
                let rcatestr = item.rcate.split('-')
                let obj = {};
                obj.category_id = rcatestr[0]
                obj.type = rcatestr[1]
                obj.category_name = rcatestr[2]
                obj.rise_percent = item.rise_percent
                 
                rules_arr.push(obj)
            })
            if(rules_arr.length ==1 && rules_arr[0].category_id ==''){
                rules_arr = []
            }
            that.editForm.rise_rules = JSON.stringify(rules_arr)
            console.log(that.editForm.rise_rules)
            abc.post(that,potUrl.risedone,that.editForm,function(res){
                that.editShow = false;
                that.editForm = {
                    title:'',//调价名称
                    date:'',//调价日期
                    period_id:[],//档位
                    weekday:'1',//执行周次
                    combo_length:'',//套餐房时变化
                    rise_rules:[]//调价范围
                }
                that.editForm.rise_rules = [{
                    rcate:'',
                    rise_percent:''
                }]
                abc.get(that,potUrl.riselist,that.form,function(res){
                    that.total = parseInt(res.data.total)
                    that.tableData =  res.data;
                });//列表 
            })
        }
    }
}

</script>